<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>学习中心</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/exanIndex.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div v-cloak id="zbom">

	<header class="header">
		<a class="left_icon back_btn"></a>
		<h4 class="title">学习中心</h4>
	</header>
	
	<nav class="h5 bottom-line bg-w tc flex-row">
		<a :class="nav == 0 ? 'on flex-full' : 'flex-full'" @click="examTab(0)">推荐课程</a>
		<a :class="nav == 1 ? 'on flex-full' : 'flex-full'" @click="examTab(1)">我的学习</a>
	</nav>
	
	<div class="swiper-container Main" id="Main">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children" id="examIndex">
					<!--推荐课程-->
					<div class="lessonMod bg-w dm-mt dm-mb bottom-line top-line">
						<ul class="lessonHead dm-clearfix">
							<li class="bt dm-left dm-clearfix">
								<p class="icon dm-left">
									<img src="image/icon/recod_01.png" />
								</p>
								<h4 class="txt dm-left">课程推荐 (3)</h4>
							</li>
							<li class="link h5 dm-right" @click="skiUrl" data-href="allCourses.html">全部课程</li>
						</ul>
						<ol class="lessonBox flex-row bottom-line" v-for="(item,index) in lesson" @click="skipDtl(item.id)">
							<li class="photo">
								<img :src="item.photo" />
							</li>
							<li class="info flex-full">
								<h5 class="name dm-wrap">{{item.name}}</h5>
								<h5 class="classifyMod">
									{{item.classify}}
									<span class="type">{{item.type}}</span>
								</h5>
								<h5 class="exMod dm-clearfix">
									<div class="num dm-left">
										<span class="icon">
											<img src="image/icon/preview_icon.png" />
										</span>{{item.viewNum}}
									</div>
									<div class="total h6 dm-wrap dm-right">{{item.statu == 0 ? '未开始学习' : '已学'+item.duration+'个课时'}}</div>
								</h5>
							</li>
						</ol>
					</div>
					
					<!--我的学习-->
					<div class="lessonMod bg-w dm-mt dm-mb bottom-line top-line" id="myStudy">
						<ul class="lessonHead dm-clearfix">
							<li class="bt dm-left dm-clearfix">
								<p class="icon dm-left">
									<img src="image/icon/recod_02.png" />
								</p>
								<h4 class="txt dm-left">我的学习 (3)</h4>
							</li>
							<li class="link h5 dm-right" @click="skiUrl" data-href="courses_learned.html">已学课程</li>
						</ul>
						<ol class="lessonBox flex-row bottom-line" v-for="(item,index) in lesson" @click="skipDtl(item.id)">
							<li class="photo">
								<img :src="item.photo" />
							</li>
							<li class="info flex-full">
								<h5 class="name dm-wrap">{{item.name}}</h5>
								<h5 class="classifyMod">
									{{item.classify}}
									<span class="type">{{item.type}}</span>
								</h5>
								<h5 class="exMod dm-clearfix">
									<div class="num dm-left">
										<span class="icon">
											<img src="image/icon/preview_icon.png" />
										</span>{{item.viewNum}}
									</div>
									<div class="total h6 dm-wrap dm-right">{{item.statu == 0 ? '未开始学习' : '已学'+item.duration+'个课时'}}</div>
								</h5>
							</li>
						</ol>
					</div>
					
					<!--我的考试-->
					<div class="lessonMod bg-w dm-mt dm-mb bottom-line top-line">
						<ul class="lessonHead dm-clearfix">
							<li class="bt dm-left dm-clearfix">
								<p class="icon dm-left">
									<img src="image/icon/recod_03.png" />
								</p>
								<h4 class="txt dm-left">我的考试 (3)</h4>
							</li>
							<li class="link h5 dm-right" @click="skiUrl" data-href="exam_list.html">全部考试</li>
						</ul>
						<ol class="lessonBox flex-row bottom-line" v-for="(item,index) in examData" @click="skipExamDtl(item.id)">
							<li class="photo">
								<img :src="item.photo" />
							</li>
							<li class="info flex-full">
								<h5 class="name dm-wrap">{{item.name}}</h5>
								<h5 class="classifyMod">
									{{item.classify}}
									<span class="type">{{item.type}}</span>
								</h5>
								<h5 class="exMod dm-clearfix">
									<div class="num dm-left">
										{{item.startTime}}
									</div>
									<div class="total h6 dm-wrap dm-right">
										<span class="unachieve" v-if="item.statu == 0">未报名</span>
										<span class="achieved" v-if="item.statu == 1">已报名</span>
									</div>
								</h5>
							</li>
						</ol>
					</div>
					
				</div>
				
			</div>
		</div>
	</div>

</div>


<!--引入模拟数据-->
<script src="data/examData.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:"#zbom",
	data:{
		nav:0,
		swiper:null,
		lesson:[],
		examData:[]
	},
	methods:{
		//切换
		examTab:function(nav){
			if(nav==1){
				var top = $("#myStudy").offset().top - 98;
				var transX = this.swiper.getWrapperTranslate();
				this.swiper.setWrapperTranslate(transX-top);
			}else{
				this.swiper.setWrapperTranslate(0);
			};
			this.nav = nav;
		},
		//获取数据
		getLesson:function(){
			this.lesson = [];
			this.examData = [];
			for(var i=0;i<3;i++){
				this.lesson.push(courses[i]);
				this.examData.push(examData[i]);
			};
		},
		//跳转页面
		skiUrl:function(e){
			var url = e.currentTarget.getAttribute('data-href');
			location.href = url;
		},
		//跳转详情
		skipDtl:function(id){
			location.href = 'courses_dtl.html?id='+id;
		},
		skipExamDtl:function(id){
			location.href = 'exam_dtl.html?id='+id;
		},
	},
	mounted:function(){
		var that = this;
		this.swiper = pullSwiper('#Main',{
			up:true,
		});
		this.getLesson();
		this.swiper.on('setTranslate',function(e,t){
			var top = $("#myStudy").offset().top - 98;
			if(top > 0){
				that.nav = 0
			}else{
				that.nav = 1
			};
		});
	},
});


//刷新数据
function refresh(pull){
	pull.innerText = '刷新成功';
};

</script>

</body>
</html>
